<template>
    <div class="time-dimension">
        <ModalTitle title="时间维度对比分析" />
        <div class="charts" ref="echarts"></div>
    </div>
</template>

<script>
// 时间维度对比分析
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZhiNengHuaYingYongFenXi } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    mounted() {
        this.getCasesComparativeAnalysis()
    },
    methods: {
        async getCasesComparativeAnalysis() {
            const res = await ZhiNengHuaYingYongFenXi.casesComparativeAnalysisAPI()
            if (res.success) {
                let one = res.data.map(e => e.personCasesHours)
                let two = res.data.map(e => e.unPersonCasesHours)
                let type = res.data.map(e => {
                    return {
                        value: e.type,
                        textStyle: {
                            color: '#CADCDE'
                        }
                    }
                })
                this.init(one, two, type)
            } else {
                this.$message.error(res.message)
            }
        },
        init(personCasesHours, unPersonCasesHours, xData) {
            let dom = this.$refs.echarts
            let mycharts = echarts.init(dom)
            let option = {
                backgroundColor: '',
                color: ['#0079FA', '#FF932A'],
                tooltip: {
                    show: true,
                    trigger: 'item'
                },
                grid: {
                    top: 30,
                    bottom: 20,
                    left: 40,
                    right: 20
                },
                legend: {
                    top: 0,
                    right: 0,
                    itemWidth: 12,
                    itemHeight: 5,
                    data: ['人工派遣', '非人工派遣'],
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                xAxis: [
                    {
                        name: '',
                        nameLocation: 'center',
                        nameGap: 30,
                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: false
                        },
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        show: true,
                        type: 'value',
                        name: '时间 (h)',
                        nameLocation: 'end',
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            align: 'center'
                        },
                        // y轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#5A677E'
                            },
                        },
                        // y轴文字
                        axisLabel: {
                            textStyle: {
                                show: true,
                                color: "#5A677E"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                        }
                    }
                ],
                series: [
                    {
                        name: '人工派遣',
                        type: 'bar',
                        barWidth: 12,
                        data: personCasesHours
                    },
                    {
                        name: '非人工派遣',
                        type: 'bar',
                        barWidth: 12,
                        data: unPersonCasesHours
                    }
                ]
            };
            option && mycharts.setOption(option)
        }
    },
}
</script>

<style lang="less" scoped>
.time-dimension {
    width: 100%;
    height: 24.3rem;

    .charts {
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;
    }
}
</style>